<template lang="">
  <div class="container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>我的审核</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-alert title="展开查看具体审核内容" type="info" center show-icon :closable="false" v-if='tableData!=""'>
      </el-alert>
      <el-table :data="tableData" border style="width: 100%" v-if='tableData!=""'>
        <el-table-column type="expand">

          <template slot-scope="props">
            <el-alert :title="'审核不通过：'+props.row.descs" type="error" effect="dark" v-if='props.row.descs!=""'>
            </el-alert>
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品 ID">

                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="商品名称">
                <span>{{ props.row.namesd }}</span>
              </el-form-item>
              <el-form-item label="所属店铺">
                <a href="#" style="color: #5e69ad;"><span>{{ props.row.Commodity }}</span></a>
              </el-form-item>

              <el-form-item label="商品编号">
                <span>{{ props.row.Storeid }}</span>
              </el-form-item>
              <el-form-item label="商品分类">
                <span>{{ props.row.classification }}</span>

              </el-form-item>
              <el-form-item label="店铺地址">
                <span>{{ props.row.address }}</span>
              </el-form-item>
              <el-form-item label="商品描述">
                <span>{{ props.row.describes }}</span>
              </el-form-item>
              <el-form-item label="商品图片">
                <img :src="props.row.picture" alt="" srcset="" style="width: 200px;height: 200px;">
              </el-form-item>
              <el-form-item label="商品价格/元">
                <span style="color: #e4393c;font-size: 20px;"><i style="font-style: normal;font-size: 14px;">￥</i>{{
                  props.row.Price|rounding
                  }}</span>
              </el-form-item>
            </el-form>
          </template>
</el-table-column>
<el-table-column prop="id" label="商品ID">
</el-table-column>
<el-table-column prop="Storeid" label="商品编号">
</el-table-column>
<el-table-column label="商品上架者">
    <template v-slot='c'>
            <el-tag size="small">{{c.row.username}}</el-tag>
          </template>
</el-table-column>
<el-table-column label="商品审核者">
    <template v-slot='c'>
            <el-tag size="small">{{c.row.shlls}}</el-tag>
          </template>
</el-table-column>
<el-table-column label="所属店铺">
    <template v-slot='v'>
            <a href="#" style="color: #5e69ad;"><span>{{ v.row.Commodity }}</span></a>
          </template>
</el-table-column>
<el-table-column label="审核状态">
    <template slot-scope="scope">
            <el-tag :type="scope.row.stare === '未通过' ? 'warning' : 'success'" disable-transitions>
              {{scope.row.stare}}
            </el-tag>
          </template>

</el-table-column>
<el-table-column prop="Repository" label="商品仓库/件">
</el-table-column>
<el-table-column label=" 上架时间">
    <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.datetime }}</span>
          </template>
</el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChanges" v-if='tableData!=""' @current-change="handleCurrentChanges" :current-page.sync="page.currentPage" :page-sizes="[1,2,3,5,10]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
    background>
</el-pagination>
<el-empty :image-size="200" v-if='tableData==""'></el-empty>
</el-card>
</div>
</template>
<script>
    export default {
        data() {
            return {
                //表格
                tableData: [],
                //分页
                page: {
                    currentPage: 1, // 当前页
                    total: 0, // 数据总条数
                    pageSize: 5, // 每页条数
                },
            }
        },
        //过滤器
        filters: {
            rounding(v) {
                return (Math.round(v * 100) / 100).toFixed(2);
            }
        },
        methods: {
            getMt() {
                this.$axios.get('/shop/getMt', {
                    params: {
                        pageSize: this.page.pageSize,
                        currentPage: this.page.currentPage,
                        user: this.$cookie.get('user')
                    }
                }).then(res => {
                    this.page.total = res.data.data.count
                    this.tableData = res.data.data.result;
                })
            },
            handleSizeChanges(val) {
                // 保存每页显示的条数
                this.page.pageSize = val;
                this.getMt()
            },
            // 当前页码改变 就会触发这个函数
            handleCurrentChanges(val) {
                // 保存当前页码
                this.page.currentPage = val;
                this.getMt()
            },
        },

        created() {
            this.getMt()
        },
    }
</script>
<style lang="less">
    .demo-table-expand {
        font-size: 0;
    }
    
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        white-space: nowrap;
        width: 100%;
        text-overflow: ellipsis;
    }
</style>